<template>
	<view class="container">
		<u-sticky customNavHeight="0">
			<view class="u-flex u-flex-items-center u-flex-center tabs">
				<view class="u-flex u-flex-items-center search_bar">
					<view class="search_icon">
						<u-icon size="20" color="#999999" name="search"></u-icon>
					</view>
					<u--input v-model="storeName" fontSize="26rpx" :customStyle="{flex:'1',color:'#333333'}" placeholder="请输入店面名称" placeholderStyle="color:#999999;" border="none" :clearable="true" @confirm="search"></u--input>
					<u-line color="#D7D7D7" length="32rpx" direction="col" margin="0 0 0 20rpx"></u-line>
					<u-button text="查询" :hairline="false" :customStyle="{width:'100rpx',height:'60rpx',color:'#4179FF',background:'#FFFFFF',fontSize:'26rpx',border:'none',marginRight:'20rpx'}" @click="search"></u-button>
				</view>
			</view>
		</u-sticky>
		<view v-for="(item, index) in lists" class="shop">
			<view class="shop_infos">
				<view class="u-flex u-flex-items-center shop_row">
					<view class="left_space">
						<uni-icons size="20" color="#333333" custom-prefix="iconfont" type="icon-dianmian"></uni-icons>
					</view>
					<view class="shop_name Medium">{{item.storeName}}</view>
				</view>
				<view class="u-flex u-flex-items-center shop_row">
					<view class="left_space"></view>
					<view class="shop_info">
						活动时间：{{item.activityStartTime?item.activityStartTime.substring(0, 10):''}}至{{item.activityEndTime?item.activityEndTime.substring(0, 10):''}}
					</view>
				</view>
				<view class="u-flex u-flex-items-center shop_row">
					<view class="left_space"></view>
					<view class="shop_info">店面地址：{{item.activityAddress}}</view>
				</view>
			</view>
			<u-line color="#DDDDDD"></u-line>
			<view class="u-flex u-flex-items-center u-flex-end shop_btns">
				<u-button size="large" text="确认" :hairline="false" :customStyle="{width:'140rpx',height:'56rpx',lineHeight:'56rpx',color:'#4179FF',background:'#EAF0FF',fontSize:'28rpx',border:'none',margin:'0 0 0 20rpx'}" @click="submit(item)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getActivityList,
		checkStore
	} from '@/config/api.js'
	export default {
		data() {
			return {
				storeName: '', //店面名称搜索关键字
				lists: [],
				page: 1,
				limit: 20
			}
		},
		onShow() {
			let that = this;
			that.getList('init');
		},
		onPullDownRefresh() {
			let that = this;
			that.initList();
			that.getList('init');
		},
		onReachBottom() {
			let that = this;
			that.getList('loadmore');
		},
		methods: {
			initList() {
				let that = this;
				that.page = 1;
				that.lists = [];
			},
			getList(status) {
				let that = this;
				let page = status == 'loadmore' ? that.page + 1 : 1;
				let params = {
					token: that.vuex_token,
					skillBy: that.vuex_userId,
					userType: that.vuex_user.userType,
					storeName: that.storeName,
					page: page,
					limit: that.limit
				};
				getActivityList(params).then((res) => {
					if (res.data.length > 0) {
						that.page = page;
						if (status == 'init') {
							that.lists = res.data;
						} else if (status == 'loadmore') {
							that.lists = that.lists.concat(res.data);
						}
					} else {
						uni.$u.toast('没有更多了');
					}
					uni.stopPullDownRefresh();
				}).catch((err) => {
					console.log('getActivityList=', err);
					uni.stopPullDownRefresh();
				});
			},
			// 搜索
			search() {
				let that = this;
				that.initList();
				that.getList('init');
			},
			// 确认
			submit(item) {
				let that = this;
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				let ua = window.navigator.userAgent.toLowerCase();
				checkStore({
					token: that.vuex_token,
					storeId: item.storeId
				}).then(res => {
					if (res.data.isUse) {
						prevPage.$vm.storeId = item.storeId;
						prevPage.$vm.storeName = item.storeName;
						prevPage.$vm.activityDayId = item.id;
						prevPage.$vm.activityStartTime = item.activityStartTime;
						prevPage.$vm.customerId = '';
						prevPage.$vm.customerName = '';
						uni.$u.route({
							type: 'navigateBack'
						});
					} else {
						uni.showModal({
							title: '温馨提示',
							content: '当前活动暂不支持此方式进行收款，点击确认后系统会为您自动切换到正确收款方式',
							showCancel: true,
							success: function(e) {
								if (e.confirm) {
									let formData = {
										amountCollected: prevPage.$vm.amount,
										moneyIn: prevPage.$vm.singleAmount,
										storeId: item.storeId,
										storeName: item.storeName,
										activityStartTime: item.activityStartTime,
										moneyInShow: prevPage.$vm.isSingle
									};
									if (ua.match(/MicroMessenger/i) == 'micromessenger') {
										wx.miniProgram.redirectTo({
											url: `/evilsDragSorts/paymentSystem/paymentSystem?pagefrom=activityCustom&storeInfo=${JSON.stringify(item)}&formData=${JSON.stringify(formData)}`, //指定跳转至小程序页面的路径
											success: function() {
												console.log('success'); //页面跳转成功的回调函数
											}
										});
									} else {
										uni.webView.redirectTo({
											url: `/evilsDragSorts/paymentSystem/paymentSystem?pagefrom=activityCustom&storeInfo=${JSON.stringify(item)}&formData=${JSON.stringify(formData)}`, //指定跳转至小程序页面的路径
											success: function() {
												console.log('success'); //页面跳转成功的回调函数
											}
										});
									}
								}
							}
						});
					}
				}).catch(err => {
					console.log('checkStore=', err);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;

		.container {
			position: relative;
			padding-bottom: 2rpx;

			.tabs {
				height: 100rpx;
				background: #4179FF;

				.search_bar {
					width: 710rpx;
					height: 70rpx;
					background: #FFFFFF;
					border-radius: 35rpx;

					.search_icon {
						margin-left: 26rpx;
						margin-right: 8rpx;
					}
				}
			}

			.shop {
				width: 710rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin: 20rpx auto;

				.shop_infos {
					padding: 10rpx 0;

					.shop_row {
						margin: 20rpx 0;

						.left_space {
							width: 54rpx;
						}

						.shop_name {

							font-size: 30rpx;
							color: #333333;
							line-height: 34rpx;
						}

						.shop_info {

							font-size: 28rpx;
							color: #999999;
							line-height: 32rpx;
						}
					}
				}

				.shop_btns {
					height: 95rpx;
				}
			}
		}
	}
</style>